<template>
    <div class="city-select">
        省：<Select v-model="provinceCode" name="province" class="select" :disabled="isRead" :clearable="!isRead" filterable>
            <Option v-for="(item, index) in provinceList"
                    v-if="item.level == 1"
                    :key="item.code"
                    :value="item.code">
                {{ item.name }}
            </Option>
        </Select>
        市：<Select v-model="cityCode" name="city" class="select" :disabled="isRead" :clearable="!isRead" filterable>
            <Option
                    v-for="(item, index) in cityList"
                    :key="item.code"
                    :value="item.code">
                {{ item.name }}
            </Option>
        </Select>
        区：<Select v-model="blockCode" name="block" class="select" :disabled="isRead" :clearable="!isRead" filterable>
            <Option
                    v-for="(item, index) in blockList"
                    :key="item.code"
                    :value="item.code">
                {{ item.name }}
            </Option>
        </Select>
    </div>
</template>
<script>
    import provinces from './provinces.js';

    export default {
        name: 'select-city',
        props: ['cityinfo', 'disabled'],
        watch: {
            provinceCode (newVal, oldVal) {
                if (!newVal) {
                    this.cityList = [];
                    this.blockList = [];
                    this.cityCode = '';
                    this.blockCode = '';
                    this.province = {};
                    this.city = {};
                    this.block = {};
                    return;
                }
                let province = this.provinceList.filter(item => {
                    if (item.code == newVal) {
                        return true;
                    }
                })[0];
                this.province = province;
                // 港澳台数据只有一级,特殊处理
                if (province.sheng == '71' || province.sheng == '81' || province.sheng == '82') {
                    this.cityList = [];
                    this.blockList = [];
                } else {
                    this.cityList = this.provinceList.filter(item => {
                        if (item.level == 2 && item.sheng && province.sheng == item.sheng) {
                            return true;
                        }
                    });
                }
            },
            cityCode (newVal) {
                if (!newVal) {
                    this.blockList = [];
                    this.blockCode = '';
                    this.city = {};
                    this.block = {};
                    return;
                }
                let city = this.provinceList.filter(item => {
                    if (item.code == newVal) {
                        return true;
                    }
                })[0];
                this.city = city;
                this.blockList = this.provinceList.filter(item => {
                    if (item.level == 3 && item.sheng && item.sheng == city.sheng && item.di == city.di && item.name !== '市辖区') {
                        return true;
                    }
                });
            },
            blockCode (newVal) {
                let block = this.provinceList.filter(item => {
                    if (item.code == newVal) {
                        return true;
                    }
                })[0];
                this.block = block ? block : {};
            },
            cityinfo (newVal, oldVal) {
                if (newVal) {
                    this.provinceCode = newVal.province;
                    this.cityCode = newVal.city;
                    this.blockCode = newVal.block;
                }
            },
            disabled (newVal) {
                if (newVal === true || newVal === false) {
                    this.isRead = newVal;
                }
            }
        },
        data () {
            return {
                provinceCode: '',
                cityCode: '',
                blockCode: '',
                province: {},
                city: {},
                block: {},
                cityList: [],
                provinceList: provinces,
                blockList: [],
                isRead: false
            };
        }
    };
</script>

<style scoped>
    .city-select {
        font-size: 15px;
        display: -webkit-flex;
        display: flex;
        align-items:Center;
        width: 100%;
    }
    .select {
        padding-right: 10px;
    }
</style>